<template>
  <li class="classifylist" ref="item">
    <div class="top">
      <span></span>
      <h1>
        {{ item.name }}
        <p>{{ item.name_bg }}</p>
      </h1>
    </div>
    <div class="bottom">
      <ul>
        <li
          v-for="item in list"
          :key="item.id"
          @click="classifytosearch(item.name)"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
  </li>
</template>

<script>
export default {
  props: ["item"],
  computed: {
    list() {
      return this.item.cs;
    },
  },
  methods: {
    classifytosearch(str) {
      this.$store.commit("classifytosearch", str);
      this.$router.push({ path: "/search" });
    },
  },
  mounted: function () {
    console.log(this.$refs.item.offsetHeight);
    this.$emit("get-height", this.$refs.item.offsetHeight);
  },
};
</script>

<style lang="less" scoped>
.classifylist {
  margin-bottom: 30px;
  &:last-child {
    margin-bottom: 0;
  }
  .top {
    display: flex;
    align-items: center;
    margin-left: 9px;
    span {
      display: block;
      width: 10px;
      height: 10px;
      background-image: url("../assets/ctb.png");
      background-size: 100%;
      background-position: center;
    }
    h1 {
      font-size: 17px;
      margin: 10px 5px;
      position: relative;
      p {
        position: absolute;
        left: 0;
        bottom: -9px;
        font-size: 35px;
        color: #f5f5f5;
        z-index: -1;
      }
    }
  }
  .bottom {
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        color: #666;
        width: 30%;
        text-align: center;
        margin-left: 9px;
        margin-bottom: 9px;
        background-color: #f9f9f9;
        padding: 15px 0;
        font-size: 14px;
        border-radius: 3px;
      }
    }
  }
}
</style>